<template>
    <div class="page-container">
        <header-nav/>
        <media :query="{minWidth: 769}">
            <div class="pc-box">
                <p class="pc-box-title">活动中心</p>
                <div class="pc-box-tools">
                    <div class="pc-box-tools-row">
                        <span>活动状态：</span>
                        <span class="row-btn" :class="{'btn-this': tabbarType=='all'}" @click="clickTabbar('all')">全部</span>
                        <span class="row-btn" :class="{'btn-this': tabbarType=='before'}" @click="clickTabbar('before')">未开始</span>
                        <span class="row-btn" :class="{'btn-this': tabbarType=='watit'}" @click="clickTabbar('watit')">进行中</span>
                        <span class="row-btn" :class="{'btn-this': tabbarType=='end'}" @click="clickTabbar('end')">已结束</span>
                    </div>
                    <div class="pc-box-tools-row">
                        <span>发布时间：</span>
                        <span class="row-btn" :class="{'btn-this': filterType=='all'}" @click="clickFilter('all')">全部</span>
                        <span class="row-btn" :class="{'btn-this': filterType=='week'}" @click="clickFilter('week')">一周内</span>
                        <span class="row-btn" :class="{'btn-this': filterType=='month'}" @click="clickFilter('month')">一个月内</span>
                        <span class="row-btn" :class="{'btn-this': filterType=='monthMore'}" @click="clickFilter('monthMore')">三个月内</span>
                    </div>
                    <div class="pc-box-tools-row">
                        <span>活动搜索：</span>
                        <input class="row-input" type="text" v-model="inputValue" placeholder="活动主题">
                        <button class="row-search" @click="getSTList">搜索</button>
                    </div>
                </div>
                <div class="pc-box-card" v-for="item in userActLists" :key="item.ActivityID">
                    <div class="pc-box-card-rahmen">
                        <img :src="item.HeadLogo">
                    </div>
                    <div class="pc-box-card-info">
                        <p class="info-theme">{{item.Theme}}</p>
                        <p class="info-site">{{item.Adress}}</p>
                        <p class="info-time">{{item.ThemeTime}}</p>
                        <span class="info-tab">+ {{item.IndustryType}}</span>
                        <div class="info-view">
                            <span>报名人数：{{item.Pageview}}人</span>
                            <div class="info-btns">
                                <button class="btn-common">
                                    <van-icon name="edit"></van-icon>
                                    <span>电子票</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="pc-box-card-status">
                        <span class="status-0" v-show="item.ActivityStatus==0">待参与</span>
                        <span class="status-1" v-show="item.ActivityStatus==1">活动中</span>
                        <span class="status-2" v-show="item.ActivityStatus==2">已结束</span>
                    </div>
                </div>
            </div>
        </media>
        <media :query="{maxWidth: 768}">
            <div class="m-box">
                <div class="m-box-tabar">
                    <div class="m-box-tabar-item" data-type="0" @click="clickTabbar('all')">
                        <span>全部</span>
                        <span class="item-bar" v-show="tabbarType=='all'"></span>
                    </div>
                    <div class="m-box-tabar-item" @click="clickTabbar('watit')">
                        <span>进行中</span>
                        <span class="item-bar" v-show="tabbarType=='watit'"></span>
                    </div>
                    <div class="m-box-tabar-item" @click="clickTabbar('end')">
                        <span>已结束</span>
                        <span class="item-bar" v-show="tabbarType=='end'"></span>
                    </div>
                </div>
                <div class="m-box-card" v-for="item in userActLists" :key="item.ActivityID">
                    <div class="m-box-card-top">
                        <span class="top-title">{{item.Sponsor}}</span>
                        <span class="top-status-0" v-show="item.ActivityStatus==0">待参与</span>
                        <span class="top-status-1" v-show="item.ActivityStatus==1">活动中</span>
                        <span class="top-status-2" v-show="item.ActivityStatus==2">已结束</span>
                    </div>
                    <div class="m-box-card-main">
                        <div class="main-rahmen">
                            <img :src="item.HeadLogo">
                        </div>
                        <div class="main-info">
                            <p class="main-theme">{{item.Theme}}</p>
                            <p class="main-site">{{item.Adress}}</p>
                            <p class="main-time">{{item.ThemeTime}}</p>
                        </div>
                    </div>
                    <router-link class="m-box-card-btm" :to="'ticket?st='+item.ActivityID+'&phone='+userPhone+'&unionid='+userUnionid+'&isQuery=true'">
                        <button class="btm-btn">电子票</button>
                    </router-link>
                </div>
            </div>
        </media>
        <media :query="{minWidth: 768}">
            <footer-nav/>
        </media>
    </div>
</template>

<script>
import Media from 'vue-media';
import Moment from 'moment';
import Header from '../components/header';
import Footer from '../components/footer';
export default {
    name: 'MyActPage',
    data() {
        return {
            allUserActLists: [],
            userActLists: [],
            tabbarType: 'all',
            filterType: 'all',
            inputValue: null
        };
    },
    components: {
        'header-nav': Header,
        'footer-nav': Footer,
        Media
    },
    created() {
        const token = this.$cookies.get('token');
        let activityList = this.$store.state.ActivityList;
        if (!activityList) {
            $.ajax({
                type: 'GET',
                url: this.wxUrl + '/api/Activity/Get',
                success: (res) => {
                    activityList = res;
                    this.$store.commit('getActivity', res);
                }
            });
        }
        $.ajax({
            type: 'GET',
            url: this.baseUrl + '/api/account/getActivity',
            headers: { 'Authorization': token },
            success: (res) => {
                const dateNow = Moment().format('YYYY-MM-DD HH:mm:ss');
                let tempList = [];
                console.log('GetShareActivityList', res);
                console.log('GetActivityList', activityList);
                activityList.forEach(element => {
                    let filtAct = res.filter(item => item.ST == element.ActivityID);
                    if (filtAct.length) {
                        element.OpenId = filtAct[0].OpenId;
                        if (dateNow > element.StartTime && dateNow <= element.CheckinTime) {
                            element.ActivityStatus = 0;
                        } else if (dateNow > element.CheckinTime && dateNow < element.EndTime) {
                            element.ActivityStatus = 1;
                        } else if (dateNow >= element.EndTime) {
                            element.ActivityStatus = 2;
                        }
                        tempList.push(element);
                    }
                });
                this.allUserActLists = tempList;
                this.userActLists = tempList;
            },
            fail: () => {
                this.$toast('获取用户登录状态失败，请重新登录');
            }
        });
    },
    methods: {
        clickTabbar(type) {
            const dateNow = Moment().format('YYYY-MM-DD HH:mm:ss');
            const allLists = this.allUserActLists;
            this.tabbarType = type;
            this.filterType = 'all';
            switch (type) {
                case 'all':
                    this.userActLists = allLists;
                    break;
                case 'before':
                    this.userActLists = allLists.filter(item => dateNow < item.StartTime && dateNow <= item.CheckinTime);
                    break;
                case 'watit':
                    this.userActLists = allLists.filter(item => dateNow > item.CheckinTime && dateNow < item.EndTime);
                    break;
                case 'end':
                    this.userActLists = allLists.filter(item => dateNow >= item.EndTime);
                    break;
                default:
                    break;
            }
        },
        clickFilter(type) {
            const dateWeek = Moment().subtract(1, 'weeks').format('YYYY-MM-DD HH:mm:ss');
            const dateMonth = Moment().subtract(1, 'months').format('YYYY-MM-DD HH:mm:ss');
            const dateMonthMore = Moment().subtract(3, 'months').format('YYYY-MM-DD HH:mm:ss');
            const allLists = this.allUserActLists;
            this.filterType = type;
            this.tabbarType = 'all';
            switch (type) {
                case 'all':
                    this.userActLists = allLists;
                    break;
                case 'week':
                    this.userActLists = allLists.filter(item => dateWeek < item.StartTime);
                    break;
                case 'month':
                    this.userActLists = allLists.filter(item => dateMonth < item.StartTime);
                    break;
                case 'monthMore':
                    this.userActLists = allLists.filter(item => dateMonthMore < item.StartTime);
                    break;
                default:
                    break;
            }
        },
        getSTList() {
            const allLists = this.allUserActLists;
            const value = this.inputValue;
            this.tabbarType = '';
            this.filterType = '';
            if (this.inputValue) {
                this.userActLists = allLists.filter(item => item.Theme && item.Theme.indexOf(value) > -1);
            } else {
                this.$toast('请输入搜索内容');
            }
        }
    }
};
</script>

<style scoped>
@import "../assets/css/MyActivities.css";
</style>
